<template>
	<view class="content">
		<view class="login-styless">
			<image src="../../static/sm.png" style="height: 100%;width: 100%;"></image>
		</view>
		<view class="btn-bottom">立即邀请</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				form: {
					name: '',
					intro: ''
				},
				placeholderstyle: {
					"color": "#666666" 
				},
				tips: '',
				// refCode: null,
				seconds: 10
			}
		},
		onLoad() {

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style>
	.yhxy{
		display: flex;	
		align-items: center;
		margin-top: 30upx;
		margin-bottom: 70upx;
	}
	.xk{
		width: 30upx;
		height: 30upx;
		border: 1px solid #333333;
		display: flex;
		align-items: center;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-image: url('../../static/yqhysm.png');
		background-size: 100% 100%;
		height: 100vh;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.login-styless {
		width: 85%;
		height: 650upx;
		margin: 0 auto;
		margin-top: 380upx;
		/* background-color: #ffffff; */
		/* border-radius: 20upx; */
		/* padding: 50upx; */
		/* padding-bottom: 50upx; */
	}

	.title {
		width: 100%;
		text-align: center;
		font-size: 40upx;
		font-weight: bold;
		color: #0000000;
	}
	.btn{
		/* width: 180upx; */
		height: 60upx;
		background-color: #00B2E5;
		border-radius: 50upx;
		line-height: 60upx;
		text-align: center;
		color: #ffffff;
		font-size: 25upx;
		margin-left: 10upx;
	}
	.wrap{
		margin-left: 10upx;
	}
	.input-style{
		width: 300upx;
		background-color: #F5FAFF;
	}
	.input-style-tjr{
		width: 380upx;
		background-color: #F5FAFF;
	}
	.form-style-title{
		color: #000;
		font-weight: 600;
		font-size: 25upx;
	}
	.btn-bottom{
		width: 370upx;
		height: 90upx;
		background: linear-gradient(to bottom, #FFD543, #FDA917);
		box-shadow: 1upx 2upx 7upx 0upx rgba(255, 255, 255, 0.66);
		border-radius: 50upx;
		color: #fff;
		line-height: 90upx;
		text-align: center;
		font-size: 40upx;
		font-weight: bold;
		position: relative;
		bottom: 40upx;
	}
</style>
